<template>
  <!-- 文件类型是图片 -->
  <ImageMessage :item="item" v-if="isImage(filename)" />
  <!-- 文件类型是图片 -->
  <VideoMessage v-else-if="isVideo(filename)" :msg-info="item" />
  <div v-else class="info-content file-content" @click.stop="preview(item)">
    <img class="file-img" :src="getAssetsFile(judgedFileType(filename))" />
    <div>
      <p class="file-name">
        {{ filename }}
      </p>
      <span style="color: #8c8c8c">
        {{ readablizeBytes(file_length) }}
        <template v-if="judgedFileType(filename) == 'pdf.png'">
          <a @click.stop="download(url, filename)">{{$t('common.base.clickToDownload')}}</a>
        </template>
        <template v-else>
          <a target="_blank" :href="url"
          >{{$t('common.base.clickToDownload')}}</a
          >
        </template>
      </span>
    </div>
    <div
      v-if="judgedFileType(filename) == 'audio.png'"
      class="voice"
      :class="`voice_${item.id}`"
    >
      <div class="voice_bg voice_play"></div>
    </div>
  </div>
</template>

<script>
/** vue */
import ChatMixin from '@src/modules/im/ChatMixin/index.js';
import ImageMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/ImageMessage.vue';
import VideoMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/VideoMessage.vue';

/** util */
import { isImage, isVideo } from '@src/modules/im/imChat/utils/tools.js';
// import { getAssetsFile } from '@src/util/viteUtil.js'
import { getOssUrl } from '@src/util/assets'
const audio = getOssUrl('/im/audio.png')
const doc = getOssUrl('/im/doc.png')
const file = getOssUrl('/im/file.png')
const image = getOssUrl('/im/image.png')
const pdf = getOssUrl('/im/pdf.png')
const ppt = getOssUrl('/im/ppt.png')
const txt = getOssUrl('/im/txt.png')
const xls = getOssUrl('/im/xls.png')

const fileTypeImg = {
  audio,
  doc,
  file,
  image,
  pdf,
  ppt,
  txt,
  xls,
}


export default {
  name: 'file-message',
  components: {
    ImageMessage,
    VideoMessage,
  },
  mixins: [ChatMixin],
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      previewFile: {},
    };
  },
  computed: {
    filename() {
      return this.compatibleFieldByExt(this.item, 'filename');
    },
    url() {
      return this.compatibleFieldByExt(this.item, 'url');
    },
    file_length(){
      return this.compatibleFieldByExt(this.item, 'file_length');
    }
  },
  methods: {
    isImage,
    isVideo,
    getAssetsFile(fileName) {
      return fileTypeImg[fileName.replace('.png', '')];
    },
  },
};
</script>

<style scoped lang='scss'>
.file-content {
  display: flex;
  max-width: 80%;
  padding: 10px;
  border: 1px solid #e8e8e8;
  font-size: 12px;
  margin-left: 8px;
  margin-right: 8px;
  border-radius: 8px 8px 8px 0px;
  .file-name {
    font-size: 14px;
    font-weight: bold;
  }
  .file-img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 4px;
  }
  p {
    margin-bottom: 4px;
  }
  a {
    color: $color-primary-light-6 !important;
    cursor: pointer;
  }
}
</style>